import type { App } from "vue";
interface NewHtmlElement extends HTMLElement {
  _slotObserver?: any;
}

// 动态监测插槽变化
const vFocus = {
  mounted(el: NewHtmlElement, binding: any) {
    const callback = binding.value;
    const observer = new MutationObserver(() => {
      callback(el.children.length > 0, el);
    });

    observer.observe(el, {
      childList: true,
      subtree: true,
    });

    el._slotObserver = observer;
  },
  unmounted(el: NewHtmlElement) {
    el._slotObserver?.disconnect();
  },
};
export function setObserveSlotFun(app: App) {
  app.directive("dyxSlotsChange", vFocus);
}
